import { Table } from 'antd';
import React, { useEffect } from 'react'
import { useState } from 'react'
import axios from 'axios';

export default function Phone() {
  //1. 数据
  let [phone, setPhone] = useState([]);

  //2. 准备结构
  let columns = [
    {
      title: '编号',
      dataIndex: 'id',
      render: (value, row, index) => {
        return index + 1;
      }
    },
    {
      title: '商品标题',
      dataIndex: 'title'
    },
    {
      title: '价格',
      dataIndex: 'price',
      render: (value) => {
        return value + ' ¥'
      }
    },
    {
      title: '店铺',
      dataIndex: 'shop'
    },
    {
      title: '封面',
      dataIndex: 'remote_img',
      //自定义渲染表格内容
      //value remote_img 对应的属性值
      //row   当前记录的对象
      render: (value, row, index) => {
        // console.log(value, row, index);
        return <img width='50' src={value} alt="" />
      }
    }
  ]

  //发送请求
  useEffect(() => {
    async function getGoods(){
      //获取数据
      let result = await axios.get('http://api.xiaohigh.com/goods')
      //更新状态
      setPhone(result.data);
    }

    getGoods();
  }, [])

  return (
    <Table dataSource={phone} columns={columns} bordered />
  )
}
